<template>
  <el-card>
    <el-form 
    ref="addForm" 
    label-width="100px" 
    :model="addData"
    :rules="rules">
    <el-form-item label="角色名称" prop="roleid">
        <el-select v-model="addData.roleid">
            <el-option label="请选择" value=""></el-option>
            <el-option v-for="item in roleList" :key="item.id" :label="item.rolename" :value="item.id"></el-option>
        </el-select>

    </el-form-item>
    <el-form-item label="账号" prop="username">
        <el-input v-model="addData.username" placeholder="请输入管理员账号"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
        <el-input v-model="addData.password" type="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="status">
        <el-radio-group v-model="addData.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm">立即提交</el-button>
        <el-button type="dafault" @click="resetForm">重置</el-button>
    </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {getRoleList}  from '../../request/role'
export default {
    data(){
        return{
            roleList:[],
            addData:{
                roleid:'',
                username:'',
                password:'',
                status:1
            },
            rules:{
                roleid:{required:true,message:'请选择角色'},
                username:{required:true,message:'请输入账号'},
                password:{required:true,message:'请输入密码'},
                status:{required:true,message:'请选择状态'}
            }
        }
    },
    methods:{
        submitForm(){
            this.$refs.addForm.validate(async valid=>{
                if(valid){
                    const res=await this.$http.post('/api/useradd',this.addData)
                    if(res.code==200){
                        this.$success(res.msg)
                        return this.$router.push('/admin')
                    }
                    this.$error(res.msg)
                }

            })
        },
        resetForm(){
            this.$refs.addForm.resetFileds()
        },
        async getRoleList(){
            const list=await getRoleList()
            if(list){
                this.roleList=list
            }

        }
    },
    created(){
        this.getRoleList()
    }
};
</script>

<style lang='less' scoped>
.el-form{
    width: 600px;
    margin: auto;
}

</style>